<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <title>Wobble — Alien.js</title>

    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono">
    <link rel="stylesheet" href="../assets/css/style.css">

    <script type="importmap">
        {
            "imports": {
                "three": "https://unpkg.com/three/build/three.module.js",
                "three/addons/": "https://unpkg.com/three/examples/jsm/",
                "@alienkitty/space.js/three": "https://unpkg.com/@alienkitty/space.js/src/three.js",
                "@alienkitty/alien.js/three": "../../src/three.js"
            }
        }
    </script>

    <script type="module">
        import { Vector3 } from 'three';
        import { Wobble } from '@alienkitty/alien.js/three';

        const position = new Vector3();
        const wobble = new Wobble(position);
        wobble.scale = 100;

        function animate(time) {
            requestAnimationFrame(animate);

            console.log(position);
            wobble.update(time * 0.001 * 0.5); // seconds * 0.5
        }

        requestAnimationFrame(animate);
    </script>
</head>
<body>
</body>
</html>
